/**
* name:ait_date_widget
* version:1.0.0
* author:alongite
* email:wxlxinglong@outlook.com
* introduction:a data widget which can set almost every property. it is growing up. you can use it for free.
* usage:
*/

function ait_date_widget(obj){
  //初始化设置
  var args = {
    id: obj.id,
    weekName: obj.weekName || ["日","一","二","三","四","五","六"],//设置星期格式
    titleColor: obj.titleColor || ["#0078D7","#fff"],//设置标题颜色
    weekColor: obj.weekColor || ["#ddd","#000"],//设置星期栏颜色
    data: obj.data || {},//设置数据
    dataColor: obj.dataColor || "#FF8300",//设置有数据的元素的颜色
    box: document.getElementById(obj.id),
    widgetFloat: obj.widgetFloat || ['250','85'],//设置浮动面板的大小
    floatColor: obj.floatColor || "#0078D7"
  };

  //检测是否设置了宽度
  if(args.box.offsetWidth === document.body.clientWidth){
    args.box.style.width = '300px';
  }
  //检测是否设置了高度
  if(!args.box.offsetHeight){
    if(args.box.offsetWidth == '300'){
      args.box.style.height = '350px';
    } else {
      args.box.style.height = (args.box.offsetWidth * 1.2) + 'px';
    }
  }
  //获取当前时间
  args.getDate = function(){
    var date = new Date();
    args.date = {
      year: date.getFullYear(),
      month: date.getMonth() + 1,
      day: date.getDate(),
      week: date.getDay(),
      localeDate: date.valueOf()
    };
  };

  //获取日期加减
  args.changeDate = function(d, num) {
    var dd = new Date(d);
    dd = dd.valueOf();
    dd = dd + num * 24 * 60 * 60 * 1000;
    return dd;
  };
  //显示日期

  args.widgetDate_show = function(d_init) {
    var widgetDate_li = [];
    var d = [];
    var flag = 0;
    for(var i = 0; i < 42; i ++){
      d[i] = new Date(args.changeDate(d_init.getTime(), i));
      widgetDate_li[i] = document.createElement('li');
      widgetDate_li[i].innerText = d[i].getDate();
      widgetDate_li[i].style.display = 'block';
      widgetDate_li[i].style.width = '14.28%';
      widgetDate_li[i].style.height = '16%';
      widgetDate_li[i].style.margin = '0.3% 0';
      widgetDate_li[i].style.float = 'left';
      if(d[i].getDate() == '1'){
        if(flag === 0){
          for(var j = 0; j < i ; j++){
            widgetDate_li[j].style.color = '#ccc';
          }
        }
        flag++;
      }
      if(flag === 2){
        widgetDate_li[i].style.color = '#ccc';
      }
      if(('' + args.date.year + (args.date.month - 1) + args.date.day) === ('' + d[i].getFullYear() + d[i].getMonth() + d[i].getDate())){
        if(flag !== 2){
          widgetDate_li[i].style.backgroundColor = args.titleColor[0];
          widgetDate_li[i].style.color = args.titleColor[1];
          widgetDate_li[i].style.borderRadius = '50%';
        }
      }
    }
    return widgetDate_li;
  };


  args.createWidget = function() {
    //主体
    var widgetBox = document.createElement('div');
    widgetBox.style.width = '100%';
    widgetBox.style.height = '100%';
    widgetBox.style.boxSizing = 'border-box';
    widgetBox.style.border = '1px solid ' + args.titleColor[0];
    widgetBox.style.textAlign = 'center';
    //头部年月
    var widgetHead = document.createElement('div');
    widgetHead.style.width = '100%';
    widgetHead.style.height = '12%';
    widgetHead.style.backgroundColor = args.titleColor[0];
    widgetHead.style.cursor = 'pointer';
    //头部左箭头
    var widgetHead_left = document.createElement('div');
    widgetHead_left.style.width = '10%';
    widgetHead_left.style.height = '100%';
    widgetHead_left.style.color = args.titleColor[1];
    widgetHead_left.style.float = 'left';
    widgetHead_left.innerHTML = '&lt';
    widgetHead_left.setAttribute('class','widget_adjustMonth');
    widgetHead.appendChild(widgetHead_left);
    //头部右箭头
    var widgetHead_right = document.createElement('div');
    widgetHead_right.style.width = '10%';
    widgetHead_right.style.height = '100%';
    widgetHead_right.style.color = args.titleColor[1];
    widgetHead_right.style.float = 'right';
    widgetHead_right.innerHTML = '&gt';
    widgetHead_right.setAttribute('class','widget_adjustMonth');
    widgetHead.appendChild(widgetHead_right);
    //头部中间年月部分
    var widgetHead_center = document.createElement('div');
    widgetHead_center.style.width = '100%';
    widgetHead_center.style.height = '100%';
    widgetHead_center.style.color = args.titleColor[1];
    widgetHead_center.innerText = args.date.year + ' - ' + args.date.month;
    widgetHead_center.setAttribute('class','widget_adjustMonth');
    widgetHead.appendChild(widgetHead_center);

    //星期显示
    var widgetWeek = document.createElement('ul');
    widgetWeek.style.width = '100%';
    widgetWeek.style.height = '10%';
    widgetWeek.style.padding = '0 0';
    widgetWeek.style.margin = '0 0';
    widgetWeek.style.backgroundColor = args.weekColor[0];
    widgetWeek.style.color = args.weekColor[1];
    widgetWeek.style.listStyle = 'none';
    var widgetWeek_li = [];
    for(var i = 0; i < args.weekName.length; i ++) {
      widgetWeek_li[i] = document.createElement('li');
      widgetWeek_li[i].innerText = args.weekName[i];
      widgetWeek_li[i].style.display = 'block';
      widgetWeek_li[i].style.width = '14.28%';
      widgetWeek_li[i].style.height = '100%';
      widgetWeek_li[i].style.float = 'left';
      widgetWeek.appendChild(widgetWeek_li[i]);
    }

    //具体日期的显示
    var widgetDate = document.createElement('ul');
    widgetDate.style.width = '100%';
    widgetDate.style.height = '78%';
    widgetDate.style.padding = '0 0';
    widgetDate.style.margin = '0 0';
    widgetDate.setAttribute('id','ait_date_widget_show');
    var d_init = new Date(args.changeDate(args.date.localeDate, '-' + args.date.week));
    var widgetDate_li = args.widgetDate_show(d_init);
    for(i = 0; i < widgetDate_li.length; i++){
      widgetDate.appendChild(widgetDate_li[i]);
    }

    //浮动的小提示标签
    var widgetFloat = document.createElement('div');
    widgetFloat.style.width = args.widgetFloat[0] + 'px';
    widgetFloat.style.height = args.widgetFloat[1] + 'px';
    widgetFloat.style.display = 'none';
    widgetFloat.style.backgroundColor = '#fff';
    widgetFloat.style.color = '#000';
    widgetFloat.style.position = 'absolute';
    widgetFloat.style.border = '1px solid ' + args.floatColor;
    widgetFloat.setAttribute('id','ait_date_widget_float');
    widgetFloat.onmouseover = function() {
      widgetFloat.style.display = 'block';
    };
    widgetFloat.onmouseout = function() {
      widgetFloat.style.display = 'none';
    };

    //将元素添加到主体中
    widgetBox.appendChild(widgetHead);//头部年月
    widgetBox.appendChild(widgetWeek);//星期
    widgetBox.appendChild(widgetDate);//日期
    widgetBox.appendChild(widgetFloat);//浮动数据
    args.box.appendChild(widgetBox);

    //设置头部文字垂直居中
    var widgetHead_left_height = widgetHead_left.offsetHeight;
    widgetHead.style.lineHeight = widgetHead_left_height + 'px';
    //设置星期文字垂直居中
    var widgetWeek_height = widgetWeek.offsetHeight;
    widgetWeek.style.lineHeight = widgetWeek_height + 'px';
    //设置具体日期文字垂直居中
    var widgetDate_li_height = widgetDate_li[0].offsetHeight;
    widgetDate.style.lineHeight = widgetDate_li_height + 'px';
  };

  //调整日期
  args.adjustDate = function(type) {
    var box = document.getElementById('ait_date_widget_show');
    var ym = adjustMonth[2].innerText.split(' - ');
    ym[0] = parseInt(ym[0]);
    ym[1] = parseInt(ym[1]);
    var nym = [];
    box.innerHTML = '';
    switch (type) {
      case '-':
        if((ym[1]-1)>0){
          nym[0] = ym[0];
          nym[1] = ym[1] - 1;
        } else {
          nym[0] = ym[0] - 1;
          nym[1] = 12;
        }
        break;
      case '+':
        if((ym[1]+1)>12){
          nym[0] = ym[0] + 1;
          nym[1] = 1;
        } else {
          nym[0] = ym[0];
          nym[1] = ym[1] + 1;
        }
        break;
      default:
        alert('参数错误');
    }
    adjustMonth[2].innerText = nym[0] + ' - ' + nym[1];
    var d = new Date(nym[0] + '/' + nym[1] + '/1');
    var d_init = new Date(args.changeDate(d, '-' + d.getDay()));
    var widgetDate_li = args.widgetDate_show(d_init);
    for(var i = 0; i < widgetDate_li.length; i++){
      box.appendChild(widgetDate_li[i]);
    }
    args.addData(args.data);
    args.eventMouseover();
    args.eventMouseout();
  };

  //添加数据
  args.addData = function(data) {
    var syausf_date_widget_show = document.getElementById('ait_date_widget_show');
    var widgetDate_li = syausf_date_widget_show.getElementsByTagName('li');
    var t = document.getElementsByClassName('widget_adjustMonth')[2].innerText.replace(/\s/g,'');
    var d = new Date(t + '-1');
    for(var key in data) {
      if( key === t ){
        for(var subkey in data[key]){
          var index = (d.getDay() - 1) + parseInt(subkey);
          widgetDate_li[index].setAttribute('class','ait_date_widget_float');
          widgetDate_li[index].style.cursor = 'pointer';
          widgetDate_li[index].style.color = args.dataColor;
          widgetDate_li[index].style.textDecoration = 'underline';
        }
      }
    }
  };


  //监听有数据的元素
  args.eventMouseover = function() {
    var li = document.getElementsByClassName('ait_date_widget_float');
    for(var i = 0; i < li.length; i ++){
      li[i].index = i;
      li[i].addEventListener('mouseover',function(e){
        var float = document.getElementById('ait_date_widget_float');
        var key = document.getElementsByClassName('widget_adjustMonth')[2].innerText.replace(/\s/g,'');
        var subkey = li[this.index].innerText;
        var txt = '';
        for(var i = 0; i < args.data[key][subkey].length; i ++){
          txt += '<br/><a href = "' + data[key][subkey][i][1] + '">' + data[key][subkey][i][0] + '</a><br/>';
        }
        // console.log(txt);
        float.innerHTML = '';
        float.innerHTML = txt;
        var t = li[this.index].offsetTop;
        var l = li[this.index].offsetLeft;
        var w = li[this.index].offsetWidth;
        float.style.top = (t - args.widgetFloat[1]) +'px';
        float.style.left = (l + parseInt(w/2) - args.widgetFloat[0]/2) +'px';
        float.style.display = 'block';
      });
    }
  };

  args.eventMouseout = function() {
    var li = document.getElementsByClassName('ait_date_widget_float');
    for(var i = 0; i < li.length; i ++){
      li[i].index = i;
      li[i].addEventListener('mouseout',function(e){
        var float = document.getElementById('ait_date_widget_float');
        float.style.display = 'none';
      });
    }
  };


  //函数初始化
  args.init = function() {
    args.getDate();//获取当前时间
    args.createWidget();//创建日历
    args.addData(args.data);
    args.eventMouseover();
    args.eventMouseout();
  };
  args.init();

  //监听标题处事件
  var adjustMonth = args.box.getElementsByClassName('widget_adjustMonth');
  adjustMonth[0].onclick = function() {
    // alert('left');
    args.adjustDate('-');
  };
  adjustMonth[1].onclick = function() {
    // alert('right');
    args.adjustDate('+');
  };
  adjustMonth[2].onclick = function() {
    alert('center');
  };
}
